<template>
  <div class="app-inner">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="(tab, tabIndex) in menusList" :key="tab.typeId" :label="tab.typeName" :name="`${tabIndex + 1}`">
          <div class="space-main">
            <space-list :treeData="floorTreeData" @nodeClick="(val) => handleNodeClick(val, tab.typeId)"/>
            <div class="space-img">
              <img :src="`/gateway/api/basic/minio/getFileSource?fileName=${mapInfo.url}`" v-if="mapInfo.url"/>
              <template v-if="mapInfo.url">
                <div
                  class="device-list"
                  @mouseenter="handleEnterDevice($event, item)"
                  @mouseleave="handleLeaveDevice"
                  v-for="item in deviceList"
                  :key="item.deviceTypeId"
                  :style="{top: item.mapY * 800-15 + 'px', left: item.mapX * 1000-25 + 'px'}"
                >
                  <!-- :style="{top: item.mapY * 760 + 'px', left: item.mapX * 960 + 'px'}" -->
                  <img :src="`/gateway/api/basic/minio/getFileSource?fileName=${item.deviceTypePicture}`"/>
                  <b>{{item.deviceName}}</b>
                </div>
              </template>
              <template v-else><el-empty description="暂无数据"></el-empty></template>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <div class="info-detail" v-if="isShowTips" :style="{top: deviceInfo.mapY, left: deviceInfo.mapX}">
      <div class="info-warp">
        <span >设备名称：</span><span>{{deviceInfo.deviceName}}</span>
      </div>
      <div class="info-warp" v-for="(val, key, index) in deviceInfo.content" :key="index">
        <span>{{key}}：</span><span>{{ getFormatterData(val, key)[1] }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import SpaceList from './components/SpaceList'
import { getMenus, getFloorTreeList, queryDeviceForTheRoom } from './js/spaceShow'
import { indicator, unitList } from './js/indicatorConstant'
export default {
  name: 'space',
  components: { SpaceList },
  data: () => ({
    activeName: '1',
    menusList: [],
    floorTreeData: [],
    mapInfo: {
      url: '',
      name: ''
    },
    deviceList: [],
    deviceInfo: {},
    isShowTips: false
  }),
  watch: {
    activeName: {
      handler () {
        this.mapInfo.url = ''
      }
    }
  },
  methods: {
    handleNodeClick (val, typeId) {
      const { id, name, mapUrl, tag } = val
      if (!mapUrl) {
        this.$message.warning(`${name}还未撒点，请前往设备中心进行撒点`)
        this.mapInfo.url = ''
        return false
      } else {
        this.mapInfo.url = mapUrl
      }
      this.queryDeviceForTheRoom(id, typeId, name, mapUrl, tag)
    },
    async queryDeviceForTheRoom (areaId, typeId, name, mapUrl, tag) {
      try {
        const params = tag === 2 ? { floorId: areaId, typeId } : { areaId, typeId }
        const res = await queryDeviceForTheRoom(params)
        if (!res.data?.length) {
          this.$message.warning(`${name}还未撒点，请前往设备中心进行撒点`)
          this.deviceList = []
          return false
        }
        if (res.code === 0) {
          this.mapInfo.url = mapUrl
          this.mapInfo.name = name
          this.deviceList = res.data.filter(n => n.mapX && n.mapY)
        }
      } catch (e) {}
    },
    handleEnterDevice (e, val) {
      // 鼠标悬浮设备
      this.deviceInfo = val
      this.isShowTips = true
      this.deviceInfo.mapX = `${e.clientX + 10}px`
      this.deviceInfo.mapY = `${e.clientY + 10}px`
    },
    getFormatterData (val, key) {
      const bad = indicator.find(n => n.name === key)?.bad
      const best = indicator.find(n => n.name === key)?.best
      let flagBad = val >= bad
      let flagGood = val >= best && val < bad
      let flagBest = val < best
      let flag = ''
      if (best) {
        flag = flagBad ? '差' : flagGood ? '良' : flagBest ? '优' : ''
      } else if (key === 'h2S_Rtd' || key === 'nh3_Rtd') {
        // 目前硫化氢和氨气才有差和正常标识
        flag = flagBad ? '差' : '正常'
      }
      const unit = unitList.find(n => n.name === key)?.unit ?? ''
      const value = val ? `${flag} ${val} ${unit}` : ''
      return [flagBad, value]
    },
    handleLeaveDevice () {
      // 鼠标离开
      this.isShowTips = true
      this.deviceInfo = {}
    },
    async getMenus () {
      try {
        const res = await getMenus(1) // 空间展示 typeFlag: 1
        if (res.code === 0) {
          this.menusList = res.data
        }
      } catch (e) {}
    },
    async getFloorTreeList () {
      try {
        const res = await getFloorTreeList({
          parentId: 0
        })
        if (res.code === 0) {
          this.floorTreeData = res.data
        }
      } catch (e) {}
    }
  },
  mounted () {
    this.getMenus()
    this.getFloorTreeList()
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  .space-main {
    position: relative;
    overflow: auto;
    .space-img {
      position: absolute;
      left: 260px;
      top: 0;
      box-sizing: border-box;
      width: 1010px;
      height: 800px;
      & > img {
        display: block;
      }
      .device-list {
        position: absolute;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        & > img {
          display: block;
          width: 30px;
          // height: 30px;
        }
        & > b {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          width: 30px;
        }
      }
    }
  }
  .info-detail {
    position: fixed;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: #fff;
    padding: 10px;
  }
}
</style>
